<template>
	<view>
		<u-navbar   :is-back="true" title="新的朋友" :title-bold="true" :title-size="34"  
					:background="{ background: '#f1f1f1'  }"
					:custom-back="goback"
					title-color="#404133" :border-bottom="(applyList.length<1&&vuex_OSPlat=='android')"  z-index="1001">
			<view slot="right" class="u-m-r-30 u-font-32" @click="toAddFriend(0)">
				<text>添加朋友</text<>
			</view>		
		</u-navbar>
		
		<view style="background-color: #f1f1f1;padding:24rpx">
			<view v-if="applyList.length<1">
				<text style="color: #909399;">你可以绑定手机号,以便找到更多好友</text>
			</view>
			<view 	v-else
					style="background-color: #ffffff;border-radius: 16rpx;padding: 14rpx 20rpx;"
					class="u-flex u-row-center u-col-center  u-tips-color u-font-32" @click="toAddFriend(1)">
				<view>
					<u-icon name="search"></u-icon>
				</view>
				<view class="u-m-l-20">
					<text>账号/手机号</text>
				</view>
			</view>
		</view>
		
		<view  v-if="vuex_OSPlat=='ios'" style="background-color: #ffffff;">
			<view style="text-align: center;color: #909399;padding: 20rpx;">
				<view>
					<image src="/static/image/login/iphone.png" style="width: 60rpx;height: 70rpx;"></image>
				</view>
				<view style="font-size: 28rpx;">添加手机联系人</view>
			</view>
			<view>
				<u-gap height="16" bg-color="#f1f1f1"></u-gap>
			</view>
		</view>
		
		
		<view v-if="vuex_OSPlat=='android'">
			<view class="u-flex u-row-between u-col-center u-p-30  u-border-top" 
				  style="background-color: #ffffff;">
				<view>
					<u-icon name="dianhua" custom-prefix="custom-icon" color="#26be3d" size="36" 
						label="添加手机联系人" label-color="#000000" label-size="32" margin-left="24rpx"></u-icon>	
				</view>
				<view>
					<u-icon name="arrow-right" size="32"></u-icon>
				</view>
			</view>	
		</view>
		
		
		<view v-if="applyList.length>0" >
			<view v-if="vuex_OSPlat=='android'" style="background-color: #f1f1f1;padding:18rpx 30rpx;font-size: 28rpx;color: #000000;">
				<text>近三天</text>
			</view>
			<view v-else style="background-color: #ffffff;padding:18rpx 30rpx;font-size: 28rpx;color: #000000;">
				<text>近三天</text>
			</view>
			<view style="background-color: #ffffff;padding:0rpx 2rpx;">
				<!-- hover-class="my-cell-hover-class" -->
				<view v-for="(item,index) in applyList" :key="index" 
					class="u-flex u-row-between u-col-top u-p-t-20">
					<view style="width:20%;padding-left: 30rpx;" @click="skipToDetail(item)">
						<u-image :src="item.avatar"  mode="aspectFill" width="90" height="90" border-radius="12">
							<u-loading slot="loading"></u-loading>
							<view slot="error" 
									class="u-flex u-row-center u-col-center  u-p-t-10"
									style="width: 90rpx;height: 90rpx;background-color: #f1f1f1;border-radius: 12rpx;">
								<view>
									<image src="/static/image/default/default-user/default-user.png" 
											style="width: 50rpx;height: 50rpx;"></image>
								</view>
							</view>
						</u-image>
					</view>
					
					<view class="u-flex u-row-between u-col-top  u-p-b-30 u-p-r-10 u-border-bottom" 
						 style="width: 80%;">
						<view  style="text-align: left;width: 70%;">
							<view style="font-size: 32rpx;color: #000000;margin-top: 10rpx;">{{item.userName}}</view>
							<view v-show="item.remark!=null&&item.remark.length>0"
									class="u-flex u-row-left u-col-center"
									style="color: #909399;">
								<view class="u-m-t-10" style="width: 80%;" @click="skipToDetail(item)">
									<view  :class="item.remarkShowAll?'u-line-5':'u-line-1'">
										<text>我:</text>
										<text v-if="item.remarkShowAll">
											{{item.remark}}
										</text>
										<text v-else>
											{{item.remark.length<10?item.remark:(item.remark.substring(0,10)+"...")}}
										</text>
									</view>
								</view>
								<view v-if="item.remark.length>10&&!item.remarkShowAll" 
									 class="u-m-t-10" hover-class="none-hover"
									 @click.stop="showRemark(item,index)">
									<text style="color:#36648b;font-size: 30rpx;">展开</text>	
								</view>	 
							</view>
						</view>
						<view  v-if="validateFrom(item)"
							   style="width:30%;text-align: center;font-size: 30rpx;color: #909399;" 
							   class="u-flex u-row-center u-col-top">
							<view>
								 <image src="/static/image/contact/arrow-right-up.png" 
										style="height: 40rpx;" mode="heightFix"></image>
							</view> 
							<view  v-if="item.isFriend==true" style="text-align: center;">
								<text>已添加</text>
							</view>
							<view v-else style="text-align: center;">
								<text>等待验证</text>
							</view>
						</view>
						<view v-else 
							  class="u-flex u-row-center u-col-center"
							  style="width:25%;text-align: center;font-size: 30rpx;color: #909399;">
							<view style="margin-top: 10rpx;background-color: #f0f0f0;color: #606266;padding: 12rpx 28rpx;border-radius: 12rpx;">
								<text>接受</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyList:[],
				parentFreshFlag:false,
			};
		},
		onLoad:function(){
			this.parentFreshFlag=false;	
		},
		onShow:function(){
			let that=this;
			that.checkFriendApply();
		},
		
		methods:{
			goback:function(){
				let that=this;
				if(that.parentFreshFlag){
					console.log("需要刷新通讯录");
					uni.reLaunch({
						url:'/pages/tabbar/contact/contact-list'
					})
				}
				else{
					uni.navigateBack();
				}
			},
			//检查是否有人添加我为好友  2022年1月17日21:21:13
			checkFriendApply:function(){
				let that=this;
				that.$u.api.imUser.checkFriendApply({}).then(res => {
					if(res.code==200&&res.data!=null){
						that.applyList=res.data.reverse();
						that.setBadgeNum();
					}else{
						that.applyList=[];
						uni.removeTabBarBadge({
							index:1
						})
					}
				})
			},
			
			handleApply:function(item,status){
				console.log("处理好友申请",item);
				let that=this;
				let param={
					applyUserId:item.id,
					status:status
				}
				that.$u.api.imUser.handleFriendApply(param).then(res => {
					if(res.code==200&&res.data!=null){
						that.setBadgeNum();
					}
				})
			},
			//设置角标
			setBadgeNum:function(){
				let that=this;
				that.$u.api.imUser.unHandleFriendApply({}).then(res => {
					console.log("待处理好友申请数量",res);
					if(res.code==200&&res.data!=null){
						let badgeNumber=res.data;
						if(badgeNumber==0){
							uni.removeTabBarBadge({
								index:1
							});
						}else{
							let number=badgeNumber.toString();
							uni.setTabBarBadge({
							  index: 1,
							  text: number
							})
						}
					}else{
						uni.removeTabBarBadge({
							index:1
						})
					}
				})
			},
			toAddFriend:function(type){
				let that=this;
				if(type==0){
					this.$u.route({
						url: '/pages/tabbar/contact/to-add-friend-index',
					})
				}
				else{
					this.$u.route({
							url:'/pages/search/searchFriend',
							animationType:'fade-in',
							animationDuration:300
						}
					);
				}
			},
			skipToDetail:function(item){
				//console.log("跳转信息页面",item);
				let isFriend=item.isFriend;
				if(isFriend){
					console.log("已添加,到好友界面");
					this.$u.route({
					  url: "/pages/tabbar/contact/friends/friend-home",
					  params:{
						  friendId:item.id,
					  },
					})
				}else{
					console.log("等待验证,到信息界面");
					if(this.validateFrom(item)){
						this.$u.route({
						  url: "/pages/tabbar/contact/friends/new-friend-index",
						  params:{
							newFriendInfo:encodeURIComponent(JSON.stringify(item)) 
						  },
						})
					}
					else{
						//同意
						console.log("同意申请");
						this.aggreApply(item);
					}
				}
			},
			aggreApply:function(item){
				let that=this;
				let param={
					applyUserId:item.id,
					status:1
				};
				console.log("处理申请",item);
				that.$u.api.imUser.handleFriendApply(param).then(res => {
					console.log("处理申请结果",item);
					that.parentFreshFlag=true;
					if(res.code==200&&res.data!=null){
						that.checkFriendApply();
					}
				})
			},
			validateFrom(item){
				return	item.fromWith.split("_")[0]==this.vuex_userInfo.id;
			},
			showRemark(item,index){
				//console.log("展开",item);
				this.applyList[index].remarkShowAll=true;
				item.remarkShowAll=true;
				console.log("展开",this.applyList);
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f1f1f1;
}
</style>
